<template>
  <view class="statusMain">
    <view
      @click="chooseItem(item)"
      :class="{ mainItem: true, blueBorder: item.choose }"
      v-for="(item, i) in statusChooseList"
      :key="i"
      >{{ item.label }}</view
    >
  </view>
</template>
<script lang="ts" setup>
const props = defineProps<{
  statusChooseList: { name: string; label: string; choose: boolean }[];
}>();
const emit = defineEmits<{
  (
    e: "chooseStatus",
    statusItem: { name: string; label: string; choose: boolean }
  );
}>();
function chooseItem(item: { name: string; label: string; choose: boolean }) {
  console.log(item, "item");
  emit("chooseStatus", item);
}
</script>
<style lang="less">
.statusMain {
  height: 84rpx;
  background: white;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  font-size: 24rpx;
  .mainItem {
    background: #ffffff;
    box-sizing: border-box;
    /* 分割线 */
    // border: 2rpx solid rgba(0, 0, 0, 0.06);
    width: 158rpx;
    height: 72rpx;
    border-radius: 88rpx;
    line-height: 72rpx;
    text-align: center;
    font-weight: 600;
    color: #999999;
    background: rgba(153, 153, 153, 0.16);
  }
  .blueBorder {
    border: 2rpx solid #0966ff !important;
    background: rgba(9, 102, 255, 0.05) !important;
    color: #0966ff !important;
  }
}
</style>
